/*
* @Date: 2021/3/30
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Collapse, List  } from 'antd';
const { Panel } = Collapse;
import Icon from '@/components/Icon';
import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      components: [{
        group: '布局',
        childs: [{
          name: 'Flex布局',
          component: 'Flex'
        }, {
          name: '两翼留白',
          component: 'WingBlank',
        }, {
          name: '上下留白',
          component: 'WhiteSpace'
        }]
      }, {
        group: '导航',
        childs: [{
          name: '导航栏',
          component: 'NavBar'
        }, {
          name: '分段器',
          component: 'SegmentedControl',
        }, {
          name: '标签页',
          component: 'Tabs'
        }, {
          name: '标签栏',
          component: 'TabBar'
        }]
      }, {
        group: '数据录入',
        childs: [{
          name: '按钮',
          component: 'Button',
        }, {
          name: '复选框',
          component: 'Checkbox',
        }, {
          name: '日历',
          component: 'Calendar',
        }, {
          name: '日期选择',
          component: 'DatePicker',
        }, {
          name: '文本输入',
          component: 'InputItem',
        }, {
          name: '图片选择',
          component: 'ImagePicker',
        }, {
          name: '选择器',
          component: 'Picker',
        }, {
          name: '单选框',
          component: 'Radio',
        }, {
          name: '区域选择',
          component: 'Range',
        }, {
          name: '滑动开关',
          component: 'Switch',
        }, {
          name: '步进器',
          component: 'Stepper',
        }, {
          name: '滑动条',
          component: 'Slider',
        }, {
          name: '搜索栏',
          component: 'SearchBar',
        }, {
          name: '文本输入',
          component: 'TextareaItem',
        }]
      }, {
        group: '数据展示',
        childs: [{
          name: '手风琴',
          component: 'Accordion',
        }, {
          name: '徽标数',
          component: 'Badge',
        }, {
          name: '走马灯',
          component: 'Carousel',
        }, {
          name: '卡片',
          component: 'Card',
        }, {
          name: '九宫格',
          component: 'Grid',
        }, {
          name: '图标',
          component: 'Icon',
        }, {
          name: '列表',
          component: 'List',
        }, {
          name: '通告栏',
          component: 'NoticeBar',
        }, {
          name: '步骤条',
          component: 'Steps',
        }, {
          name: '标签',
          component: 'Tag',
        }, {
          name: '进度条',
          component: 'Progress',
        }]
      }],
    };
  }

  componentDidMount() {
    // TODO: 后续通过文件读入
  }

  render() {
    const { components = [] } = this.state;
    return (
      <div className="components-box">
        <Collapse defaultActiveKey={components.map((vo, key) => key)}>
          {
            components.map((vo, key) => {
              return (
                <Panel header={vo.group} key={key}>
                  <List
                    itemLayout="horizontal"
                    dataSource={vo.childs}
                    renderItem={item => (
                      <List.Item>
                        <div className="draggable com-drag" data-component={item.component}><Icon type="move" className="drag" />{item.name}</div>
                      </List.Item>
                    )}
                  />
                </Panel>
              )
            })
          }
        </Collapse>
      </div>
    );
  }
}
